<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<body>
    <!-- {{ message }}<!-不支持外部s-->
    <!--<div id="app" class="app">支持双标签 body也不行
        {{ message }}
        <h2>{{ school.name }} {{ school.mobile }}</h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[1] }}</li>
        </ul>
    </div>-->
    <!--开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script>
        var app = new Vue({
            //el:"#app",
            //el:".app",
            el:"div",//开发建议使用id开发 因为是唯一
            data:{
                message:"你好 小黑! "
            }
        })
        

    </script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            }
        })
    </script> -->
    
    <!-- <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好，小黑",
                school:{

                name:"黑马程序员", 
                mobile:"111111"
                },
                campus:["北京","可能"]
            }
        })
    </script> -->
    <!-- <div id="app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info">深圳</h2>
        <h2>{{ message }}深圳</h2>部分替换使用大括号
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员！！！",
                info:"前端"
            }
        })
    </script> -->
     <!-- html结构 -->
     <!-- <div id="app">
         <p v-html="content"></p>
         <p v-text="content"></p>支持文本
     </div>
     <script>
         //3.创建Vue示例
         var app = new Vue({
             el:"#app",
             data:{
                 //content:"黑马"
                 content:"<a href='http://www.itheima.com'>河马</a>"
             }
         })
     </script> -->

     <!-- <div id="app">
         <input type="button" value="v-on指令" v-on:click="doIt">
         <input type="button" value="v-on简写" @click="doIt">
         <input type="button" value="双击事件" @dblclick="doIt">
         <h2 @click="changeFood">{{food}}</h2>
     </div>
     <script>
        var app = new Vue({
         el:"#app",
         data:{
             food:"土豆丝"
         },
         methods:{
             doIt:function(){
                 alert("做IT");
             },
             changeFood:function(){
                 //console.log(this.food);
                 this.food+="好好吃"
             }
         },
     })
     </script> -->
     <div  id="app">
       <!-- 计数器功能区域 -->
          <div class="input-num">
        <button @click="sub">
          -
        </button>
       <span>{{ num }}</span>
         <button @click="add">
          +
         </button>
      </div>
      <img src="http://www.itheima.com/images/logo.png" alt=""/>
     </div>
     <!-- 开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 编码 -->
     <script>
         //创建Vue实例
         var app = new Vue({
             el:"#app",
             data:{
                 num:1
             },
             methods:{
                 add:function(){
                    //console.log('add');
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert('别点啦，最大啦');
                    }
                 },
                 sub:function(){
                    //console.log('sub');
                    if(this.num>10){
                        this.num--;
                    }else{
                        alert('别点啦，最小啦');
                    }
                    
                 }
             },
         })
     </script>
</body>
</html>